body{
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: #59b2db;
    color: #fff;

    // 运动中
    .run{
        padding: 20px;
        height: 70px;
    
        // 户外跑
        >p:first-child{
            color: #acdfff;
            font-size: 14px;
        }
    
        // 运动中
        >p:last-child{
            display: flex;
            justify-content: space-between;
            font-size: 20px;
    
            .iconfont{
                font-size: 24px;
                color: #fff;
            }
    
            .icon-yinle{
                margin-right: 10px;
            }
        }
    }
    
    // 公里数
    .km{
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        
        span{
            font-size:60px;
            text-align: center;
        }
    }

    // GPS定位
    .gps{
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        padding: 20px;
        color: #acdfff;
        font-size: 14px;

        // 定位图标
        a{
            color: #fff;
            font-size: 40px;
        }
    }

    // 数据
    .data{
        padding: 20px 30px;  
        
        div{
            display: flex;
            justify-content: space-between;
            text-align: center;

            p{
                display: flex;
                flex-direction: column;
            }
        }

       .top{

            p{
                font-size: 12px;
                color: #acdfff;
            }

           i{
            margin-bottom: 10px;
               font-size: 25px;
               color: #fff;
           }

           span{
            font-size: 20px;
           }
        }
    }

    // 暂停、继续、结束按钮
    .button{
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        padding: 20px;
        text-align: center;

        // 每一个按钮盒子
        div{
            padding: 20px 25px;
            color: #59b2db;
            background-color: #fff;
            font-weight: bold;
            border-radius: 50%;

            >p:last-child{
                font-size: 12px;
            }
        }

        // 锁
        .icon-suoding{
            // display: none;
            position: absolute;
            right: 30px;
            padding: 10px;
            border-radius: 50%;
            border: 1px solid #fff;
        }

        
        // 继续按钮
        #goon{
            display: none;
            margin-right: 50px;
            background-color: #79f0c2;
            color: #fff;
        }

        // 结束按钮
       #over{
            display: none;
            background-color: #ff6060;
            color: #fff;
        }
    }
}
